<script src="<?php echo base_url();?>js/knockout-1.2.1.js"></script>

<p>&nbsp;</p>
<div align="center">
  <h1>Raw Material Inspection Report (Starch)</h1>
</div>
<table width="60%" border="0" align="center" cellpadding="0" cellspacing="0" class="font">
  <tr>
    <td width="12%" height="30">Date</td>
    <td width="27%" height="30"> :
      <input id="datepicker" data-bind="value: departure" /></td>
    <td width="18%" height="30">Lot no.</td>
    <td width="43%" height="30"> :
      <input name="textfield18" type="text" class="k-textbox" id="textfield18"/></td>
  </tr>
  <tr>
    <td height="30">Time</td>
    <td height="30"> :
      <input type="text" name="textfield2" id="timepicker" /></td>
    <td height="30">Grade</td>
    <td height="30"> :
      <select name="ticket2" class="select" id="ticket3">
        <option value="A">A</option>
        <option value="H">H</option>
        <option value="R">R</option>
      </select></td>
  </tr>
  <tr>
    <td height="30">Type</td>
    <td height="30"> :
      <select name="ticket5" class="select" id="ticket1">
        <option value="Modified Starch">Modified Starch</option>
        <option value="Surface Starch">Surface Starch</option>
        <option value="Catonic Starch">Catonic Starch</option>
        <option value="Native Starch">Native Starch</option>
        <option value="Wet end Starch">Wet end Starch</option>
      </select></td>
    <td height="30">Problem</td>
    <td height="30"> :
      <input name="textfield21" type="text" class="k-textbox" id="textfield21"/></td>
  </tr>
  <tr>
    <td height="30">Brand</td>
    <td height="30"> :
      <select name="ticket" class="select" id="ticket2">
        <option value="Filmkote 370">Filmkote 370</option>
        <option value="Excelsize 229">Excelsize 229</option>
        <option value="CATO 304">CATO 304</option>
        <option value="EXCELCAT27">EXCELCAT27</option>
        <option value="แป้งมันกาฬสินธุ์">แป้งมันกาฬสินธุ์</option>
        <option value="Premier Quality">Premier Quality</option>
        <option value="อุบลเกษตรพลังงาน">อุบลเกษตรพลังงาน</option>
      </select></td>
    <td height="30">&nbsp;</td>
    <td height="30">&nbsp;</td>
  </tr>
</table>
<br />
<table width="60%" align="center">
  <tr>
    <td><div align="right">
        <input name="Submit" type="submit" class="k-button" value="บันทึกข้อมูล"/>
        &nbsp;
        <input name="Reset" type="submit" class="k-button" value="ยกเลิก"/>
      </div></td>
  </tr>
</table>
<table width="60%" align="center" class="font">
  <tr>
    <td><table id="grid">
        <thead>
          <tr>
            <th data-field="Properties">Properties Item</th>
            <th data-field="Valuea">Value</th>
            <th data-field="Valueb">Value</th>
            <th data-field="Unit">Unit</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Viscosity</td>
            <td><input name="s11_1" type="number" class="k-textbox number" id="s11_1" value="0"/></td>
            <td><input name="s11_2" type="number" class="k-textbox number" id="s11_2" value="0"/></td>
            <td>(cPs)</td>
          </tr>
          <tr>
            <td>Residue</td>
            <td><input name="s12_1" type="number" class="k-textbox number" id="s12_1" value="0"/></td>
            <td><input name="s12_2" type="number" class="k-textbox number" id="s12_2" value="0"/></td>
            <td>(ppm)</td>
          </tr>
          <tr>
            <td>Residue Suction </td>
            <td><input name="s13_1" type="number" class="k-textbox number" id="s13_1" value="0"/></td>
            <td><input name="s13_2" type="number" class="k-textbox number" id="s13_2" value="0"/></td>
            <td>(%)</td>
          </tr>
          <tr>
            <td>pH</td>
            <td><input name="s14_1" type="number" class="k-textbox number" id="s14_1" value="0"/></td>
            <td><input name="s14_2" type="number" class="k-textbox number" id="s14_2" value="0"/></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>Moisture Content</td>
            <td><input name="s15_1" type="number" class="k-textbox number" id="s15_1" value="0"/></td>
            <td><input name="s15_2" type="number" class="k-textbox number" id="s15_2" value="0"/></td>
            <td>(%)</td>
          </tr>
          <tr>
            <td>Dirt Size</td>
            <td><input name="s16_1" type="number" class="k-textbox number" id="s16_1" value="0"/></td>
            <td><input name="s16_2" type="number" class="k-textbox number" id="s16_2" value="0"/></td>
            <td>(mm<sup>2</sup>)</td>
          </tr>
          <tr>
            <td>Brightness</td>
            <td><input name="s17_1" type="number" class="k-textbox number" id="s17_1" value="0"/></td>
            <td><input name="s17_2" type="number" class="k-textbox number" id="s17_2" value="0"/></td>
            <td>(%)</td>
          </tr>
          <tr>
            <td>Ash Content</td>
            <td><input name="s18_1" type="number" class="k-textbox number" id="s18_1" value="0"/></td>
            <td><input name="s18_2" type="number" class="k-textbox number" id="s18_2" value="0"/></td>
            <td>(%)</td>
          </tr>
        </tbody>
      </table>
      <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
						columns: [
						{ field: "Properties", width: "125px" },
						{ field: "Valuea", width: "20px" },
						{ field: "Valueb", width: "20px" },
						{ field: "Unit",  width: "40px" }
						],
                        //height: 1000,
						//pageable: true,
						dataSource: {
						//pageSize: 12
						} 
                    });
                });
            </script></td>
  </tr>
</table>

<!--scrip list select--> 
<script>
                $(document).ready(function() {
                    var viewModel = {
                        chosenTicket: ko.observable(),
                        resetTicket: function() { this.chosenTicket(null) },
                    };
                    $("#ticket1").kendoDropDownList().trigger("change");
                    $("#ticket2").kendoDropDownList().trigger("change");
                    $("#ticket3").kendoDropDownList().trigger("change");
                });
      		</script> 
<!--scrip วัน-เดือน-ปี--> 
<script>
                $(document).ready(function() {
                    var today = new Date(),
                        birthdays = [
                           +new Date(today.getFullYear(), today.getMonth(), 11),
                           +new Date(today.getFullYear(), today.getMonth() + 1, 6),
                           +new Date(today.getFullYear(), today.getMonth() + 1, 27),
                           +new Date(today.getFullYear(), today.getMonth() - 1, 3),
                           +new Date(today.getFullYear(), today.getMonth() - 2, 22)
                        ];

                    $("#datepicker").kendoDatePicker({
                        value: today,
                        month: {
                            // template for dates in month view
                            content: '# if ($.inArray(+data.date, [' + birthdays + ']) != -1) { #' +
                                         '<div class="birthday"></div>' +
                                     '# } #' +
                                     '#= data.value #'
                        },
                        footer: "Today - #=kendo.toString(data, 'd') #"
                    });

                    $("#datepicker").data("kendoDatePicker")
                                    .dateView.calendar.element
                                    .width(300);
                });
            </script> 
<!--scrip เวลา--> 
<script>
                $(document).ready(function() {
                    // create TimePicker from input HTML element
                    $("#timepicker").kendoTimePicker();
                });
            </script>